<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="form-group">
    <span style="display: inline-block;width: 20%">试卷编号：</span>
    <input type="text" class="form-control" style="display: inline-block;width:70%">
</div>
<div style="clear:both"></div>

<br>

<div class="panel-group" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default">

        <div class="panel-heading" role="tab" style="display: block">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1"
                   aria-expanded="false" style="display: block">
                    <div>
                        <div class="col-sm-2 control-label">题目编号：</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control">
                        </div>
                        <div style="clear:both"></div>
                    </div>
                </a>
            </h4>
        </div>

        <div id="collapse1" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div class="form-horizontal" role="form">

                    <div class="form-group">
                        <span style="display: inline-block;width: 20%">该题满分</span>
                        <input type="text" class="form-control" style="display: inline-block;width:70%">
                    </div>
                    <div class="form-group">
                        <span style="display: inline-block;width: 20%">是否为选择题:</span>
                        <input type="radio" name="optionsRadios" value="yes" checked> 是
                        <input type="radio" name="optionsRadios" value="no">否
                    </div>

                    <!--                        选择题-->
                    <div>
                        <div class="form-group">
                            <span style="display: inline-block;width: 20%">选择题答案为: </span>
                            <input type="text" class="form-control" style="display: inline-block;width:70%">
                        </div>
                    </div>
                    <!--                    非选择题，评分标准-->
                    <div>
                        <div class="panel-group" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" style="display: block">
                                    <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse"
                                           data-parent="#accordion" href="#collapse1-1"
                                           aria-expanded="false" style="display: block">
                                            <div>
                                                评分标准
                                            </div>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapse1-1" class="panel-collapse collapse" role="tabpanel">
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <span style="display: inline-block;width: 20%">描述: </span>
                                            <input type="text" class="form-control"
                                                   style="display: inline-block;width:70%">
                                        </div>
                                        <div class="form-group">
                                            <span style="display: inline-block;width: 20%">该项满分: </span>
                                            <input type="text" class="form-control"
                                                   style="display: inline-block;width:70%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary" onclick="addScoreItem(event)">添加评分标准</button>
                        </div>


                    </div>

                    <!--                    课程目标-->
                    <div>
                        <div class="form-group">
                            <input type="checkbox"> <span style="display: inline-block;width: 20%">课程目标1</span>
                            权重：<input type="text" class="form-control" style="display: inline-block;width:70%">
                        </div>

                        <div class="form-group">
                            <input type="checkbox"> <span style="display: inline-block;width: 20%">课程目标2</span>
                            权重：<input type="text" class="form-control" style="display: inline-block;width:70%">
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
    <button class="btn btn-primary" onclick="addFinalExamTask(event)">添加题目</button>
</div>
<script>


    function addScoreItem(event) {
        var sibling = event.target.previousElementSibling
        var href = sibling.getElementsByTagName("a")[0].href + "";

        let index1 = href.lastIndexOf("-");
        let number = href.substring(index1 + 1, href.length);
        number = Number(number) + 1
        var id = href.substring(href.indexOf("collapse"), href.lastIndexOf("-")) + "-" + number

        let htmlDivElement = createScoreItemNode(id);
        event.target.parentNode.insertBefore(htmlDivElement, event.target)
        console.log("id:" + id);
    }

    function createScoreItemNode(id) {
        var element = document.createElement("div");
        element.setAttribute("class", "panel panel-default");
        var str = '     <div class="panel-heading" role="tab" style="display: block">\n' +
            '                                    <h4 class="panel-title">\n' +
            '                                        <a class="collapsed" role="button" data-toggle="collapse"\n' +
            '                                           data-parent="#accordion" href="#' + id + '"\n' +
            '                                           aria-expanded="false" style="display: block">\n' +
            '                                            <div>\n' +
            '                                                评分标准\n' +
            '                                            </div>\n' +
            '                                        </a>\n' +
            '                                    </h4>\n' +
            '                                </div>\n' +
            '                                <div id="' + id + '" class="panel-collapse collapse" role="tabpanel">\n' +
            '                                    <div class="panel-body">\n' +
            '                                        <div class="form-group">\n' +
            '                                            <span style="display: inline-block;width: 20%">描述: </span>\n' +
            '                                            <input type="text" class="form-control"\n' +
            '                                                   style="display: inline-block;width:70%">\n' +
            '                                        </div>\n' +
            '                                        <div class="form-group">\n' +
            '                                            <span style="display: inline-block;width: 20%">该项满分: </span>\n' +
            '                                            <input type="text" class="form-control"\n' +
            '                                                   style="display: inline-block;width:70%">\n' +
            '                                        </div>\n' +
            '                                    </div>\n' +
            '                                </div>\n' +
            '                            '
        element.innerHTML = str
        return element
    }

    var taskTotal = 1;
    function addFinalExamTask(event) {
        taskTotal++;
        let htmlDivElement = createFinalExamTaskNode("collapse" + taskTotal);
        event.target.parentNode.insertBefore(htmlDivElement, event.target);

    }

    function createFinalExamTaskNode(id) {
        let element = document.createElement("div");
        element.setAttribute("class", "panel panel-default");
        var str = "     <div class=\"panel-heading\" role=\"tab\" style=\"display: block\">\n" +
            "            <h4 class=\"panel-title\">\n" +
            "                <a class=\"collapsed\" role=\"button\" data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#" + id + "\"\n" +
            "                   aria-expanded=\"false\" style=\"display: block\">\n" +
            "                    <div>\n" +
            "                        <div class=\"col-sm-2 control-label\">题目编号：</div>\n" +
            "                        <div class=\"col-sm-10\">\n" +
            "                            <input type=\"text\" class=\"form-control\">\n" +
            "                        </div>\n" +
            "                        <div style=\"clear:both\"></div>\n" +
            "                    </div>\n" +
            "                </a>\n" +
            "            </h4>\n" +
            "        </div>\n" +
            "\n" +
            "        <div id=\"" + id + "\" class=\"panel-collapse collapse\" role=\"tabpanel\">\n" +
            "            <div class=\"panel-body\">\n" +
            "                <div class=\"form-horizontal\" role=\"form\">\n" +
            "\n" +
            "                    <div class=\"form-group\">\n" +
            "                        <span style=\"display: inline-block;width: 20%\">该题满分</span>\n" +
            "                        <input type=\"text\" class=\"form-control\" style=\"display: inline-block;width:70%\">\n" +
            "                    </div>\n" +
            "                    <div class=\"form-group\">\n" +
            "                        <span style=\"display: inline-block;width: 20%\">是否为选择题:</span>\n" +
            "                        <input type=\"radio\" name=\"optionsRadios\" value=\"yes\" checked> 是\n" +
            "                        <input type=\"radio\" name=\"optionsRadios\" value=\"no\">否\n" +
            "                    </div>\n" +
            "\n" +
            "                    <!--                        选择题-->\n" +
            "                    <div>\n" +
            "                        <div class=\"form-group\">\n" +
            "                            <span style=\"display: inline-block;width: 20%\">选择题答案为: </span>\n" +
            "                            <input type=\"text\" class=\"form-control\" style=\"display: inline-block;width:70%\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "                    <!--                    非选择题，评分标准-->\n" +
            "                    <div>\n" +
            "                        <div class=\"panel-group\" role=\"tablist\" aria-multiselectable=\"true\">\n" +
            "                            <div class=\"panel panel-default\">\n" +
            "                                <div class=\"panel-heading\" role=\"tab\" style=\"display: block\">\n" +
            "                                    <h4 class=\"panel-title\">\n" +
            "                                        <a class=\"collapsed\" role=\"button\" data-toggle=\"collapse\"\n" +
            "                                           data-parent=\"#accordion\" href=\"#" + id + "-1\"\n" +
            "                                           aria-expanded=\"false\" style=\"display: block\">\n" +
            "                                            <div>\n" +
            "                                                评分标准\n" +
            "                                            </div>\n" +
            "                                        </a>\n" +
            "                                    </h4>\n" +
            "                                </div>\n" +
            "                                <div id=\"" + id + "-1\" class=\"panel-collapse collapse\" role=\"tabpanel\">\n" +
            "                                    <div class=\"panel-body\">\n" +
            "                                        <div class=\"form-group\">\n" +
            "                                            <span style=\"display: inline-block;width: 20%\">描述: </span>\n" +
            "                                            <input type=\"text\" class=\"form-control\"\n" +
            "                                                   style=\"display: inline-block;width:70%\">\n" +
            "                                        </div>\n" +
            "                                        <div class=\"form-group\">\n" +
            "                                            <span style=\"display: inline-block;width: 20%\">该项满分: </span>\n" +
            "                                            <input type=\"text\" class=\"form-control\"\n" +
            "                                                   style=\"display: inline-block;width:70%\">\n" +
            "                                        </div>\n" +
            "                                    </div>\n" +
            "                                </div>\n" +
            "                            </div>\n" +
            "                            <button class=\"btn btn-primary\" onclick=\"addScoreItem(event)\">添加评分标准</button>\n" +
            "                        </div>\n" +
            "\n" +
            "\n" +
            "                    </div>\n" +
            "\n" +
            "                    <!--                    课程目标-->\n" +
            "                    <div>\n" +
            "                        <div class=\"form-group\">\n" +
            "                            <input type=\"checkbox\"> <span style=\"display: inline-block;width: 20%\">课程目标1</span>\n" +
            "                            权重：<input type=\"text\" class=\"form-control\" style=\"display: inline-block;width:70%\">\n" +
            "                        </div>\n" +
            "\n" +
            "                        <div class=\"form-group\">\n" +
            "                            <input type=\"checkbox\"> <span style=\"display: inline-block;width: 20%\">课程目标2</span>\n" +
            "                            权重：<input type=\"text\" class=\"form-control\" style=\"display: inline-block;width:70%\">\n" +
            "                        </div>\n" +
            "                    </div>\n" +
            "\n" +
            "                </div>\n" +
            "\n" +
            "            </div>\n" +
            "        </div>\n";
        element.innerHTML = str
        return element
    }

</script>
</body>
</html>
